<script setup lang="ts">
import { reactive, createVNode, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useChatStore } from '@/stores/chat'
import { useModelStore } from '@/stores/model'
import { useUserStore } from '@/stores/user'
import { formatBytes } from '@/utils/format'

const { t } = useI18n()

// 聊天存储
const chatStore = useChatStore()

// 模型存储
const modelStore = useModelStore()

// 用户存储
const userStore = useUserStore()

// 状态参数
const state = reactive({
  usage: 0,
  quota: 0,
})

const onClear = (type: 'convs' | 'models' | 'local') => {
  switch (type) {
    case 'convs':
      Modal.confirm({
        title: t('setting.data.convsClearTitle'),
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content: t('setting.data.convsClearConfirmContent'),
        onOk: async () => {
          await chatStore.clearConvs()
          message.success(t('setting.data.convsClearConfirmOk'))
        },
      })
      break
    case 'models':
      Modal.confirm({
        title: t('setting.data.modelsClearTitle'),
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content: t('setting.data.modelsClearConfirmContent'),
        onOk: async () => {
          await modelStore.clearModels()
          message.success(t('setting.data.modelsClearConfirmOk'))
        },
      })
      break
    case 'local':
      Modal.confirm({
        title: t('setting.data.localClearTitle'),
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content: t('setting.data.localClearConfirmContent'),
        onOk: async () => {
          try {
            await userStore.clearLocalStorage()
            message.success(t('setting.data.localClearConfirmOk'))
            setTimeout(() => {
              location.reload()
            }, 1000)
          } catch (error) {
            window.console.error(error)
            message.error(error.message)
          }
        },
      })
      break
  }
}

// 关闭页面时调用
const onClose = () => {}

onMounted(async () => {
  try {
    // 查询存储的使用情况（IndexedDB 通常属于可用存储）
    const { usage, quota } = await navigator.storage.estimate()

    state.usage = usage
    state.quota = quota
  } catch (error) {
    window.console.error('NavigatorStorage error: ', error)
  }
})

defineExpose({
  onClose,
})
</script>

<template>
  <div>
    <div v-if="state.quota" class="mb-3">
      <a-alert type="warning">
        <template #message>
          {{
            t('setting.data.storageUsageTips', {
              usage: formatBytes(state.usage),
              quota: formatBytes(state.quota),
            })
          }}
        </template>
      </a-alert>
    </div>
    <n-list bordered>
      <n-list-item>
        <n-thing :description="t('setting.data.convsClearTitle')"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" @click="onClear('convs')">
            {{ t('setting.data.convsClearButton') }}
          </n-button>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing :description="t('setting.data.modelsClearTitle')"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" @click="onClear('models')">
            {{ t('setting.data.modelsClearButton') }}
          </n-button>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing :description="t('setting.data.localClearTitle')"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" ghost @click="onClear('local')">
            {{ t('setting.data.localClearButton') }}
          </n-button>
        </template>
      </n-list-item>
    </n-list>
  </div>
</template>

<style lang="scss" scoped></style>
